<template>
  <div>promise</div>
  <div v-for="item in menuList" :key="item.name">{{ item.name }}</div>
</template>
<script setup>
import { ref } from "vue";
const menuList = ref([]);
let promise = new Promise((resolve, reject) => {
  //   if (true) {
  //     reject("成功");
  //   } else {
  //   }
  reject("失败原因");
  // 模拟从后端请求数据，两秒钟后返回
  setTimeout(() => {
    resolve([
      { name: "宫保鸡丁", price: 20 },
      { name: "辣子鸡丁", price: 30 },
    ]);
  }, 2000);
});

console.log(promise);

// .then 接收 两个参数，他们都是函数，并且都接收一个形参，第一个函数的形参
// 代表resolve成功后返回的数据，第二个函数的形参，代表失败后返回的错误

promise
  .then(
    (result) => {
      menuList.value = result;
      console.log("打印出成功的数据", result);
    },
    (errorMessage) => {
      console.log("打印出错误的信息", errorMessage);
    }
  )
  .catch((errorMessage) => console.log("catch中的错误", errorMessage));
</script>
<style></style>
